import {DarkTheme, DefaultTheme, NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import * as React from 'react';
import {ColorSchemeName} from 'react-native';

import NotFoundScreen from '../screens/NotFoundScreen';
import {RootStackParamList} from '../types';
import BottomTabNavigator from './BottomTabNavigator';
import LinkingConfiguration from './LinkingConfiguration';
import AuthNavigator from "./route/AuthStack";
import {AuthContext} from '../App';

//根堆栈导航器通常用于在所有其他内容之上显示模式 在此处了解更多信息：https://reactnavigation.org/docs/modal
const Stack = createStackNavigator<RootStackParamList>();

//如果您不熟悉React Navigation，我们建议您仔细阅读《基础知识》指南：https://reactnavigation.org/docs/getting-started
export const Navigation = ({colorScheme}: { colorScheme: ColorSchemeName }) => {
  return (
    <AuthContext.Provider value={React.useContext(AuthContext)}>
      <NavigationContainer
        linking={LinkingConfiguration}
        theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <RootNavigator/>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

export const AuthNavigation = ({colorScheme}: { colorScheme: ColorSchemeName }) => {
  return (
    <AuthContext.Provider value={React.useContext(AuthContext)}>
      <NavigationContainer
        linking={LinkingConfiguration}
        theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <AuthNavigator/>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

const RootNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName={'Root'}
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="Root" component={BottomTabNavigator}/>
      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{title: 'Oops!'}}/>
    </Stack.Navigator>
  );
}
